<template>
    <div class="viewport">
        <topTitle :title="title"></topTitle>
        <div class="orderMenu">
			<ul>
				<li>
					<a onclick="history.pushState( null, null, '/m/muserOrder')" class="omNav">全部</a>
				</li>
				<li>
					<a onclick="history.pushState( null, null, '/m/muserOrder?orderStatus=1')" class="omNav active">待付款</a>
				</li>
				<li>
					<a onclick="history.pushState( null, null, '/m/muserOrder?orderStatus=2')" class="omNav">待发货</a>
				</li>
				<li>
					<a onclick="history.pushState( null, null, '/m/muserOrder?orderStatus=3')" class="omNav">待收货</a>
				</li>
				<li>
					<a onclick="history.pushState( null, null, '/m/muserOrder?orderStatus=4')" class="omNav">待评价</a>
				</li>
			</ul>
		</div>
        <!-- 这是订单列表 -->
        <div class="orderList">
			<div class="olAll active">	
                <div class="orderListDiv">
                    <div class="olaList" data-orderid="2018121110052550823">
                        <div class="olaList-head">
                            <p>
                                <span class="line"></span>
                                <span style="margin-left: 0.4rem">订单号：<span>
                                <span>
                                    2018121110052550823
                                </span>
                                <span class="orderStatus">
                                    待付款
                                </span>
                            </span></span></p>
                        </div>
                        <a href="/m/orderStatus?orderId=2018121110052550823">
                            
                            <div class="olaList-center" data-skuid="10006684706262" data-num="1">
                                <div class="olaListcenter-left fl">
                                    <img src="http://img.66fenqi.cn/prodMainPic/20181128/kGMlFmXxGX8KbXs.jpg">
                                </div>
                                <div class="olaListcenter-right">
                                    <p class="orderTitile">
                                        海苔苏打饼干1800g
                                    </p>s
                                    <p class="orderPro">
                                        5斤
                                    </p>
                                    <p class="orderPriceNum">
                                        <span class="orderPrice">￥
                                            <label>0.01</label>
                                        </span>
                                        <span class="orderNum fr">X 1</span>
                                    </p>
                                </div>
                            </div>
                            
                        </a>
                        <div>
                            <p class="orderCount">共1件商品合计￥0.01(含运费￥0.0)</p>
                        </div>
                        <div class="olaList-footer">
                            
                            <a class="cancelOrder" data-value="2018121110052550823">
                                取消订单
                            </a>
                            <a class="maketrue" href="/m/orderPay?orderId=2018121110052550823&amp;orderTotalprice=0.01">
                                立即付款
                            </a>
                            
                        </div>
                    </div>
                    <div class="olaList" data-orderid="2018121110052550823">
                        <div class="olaList-head">
                            <p>
                                <span class="line"></span>
                                <span style="margin-left: 0.4rem">订单号：<span>
                                <span>
                                    2018121110052550823
                                </span>
                                <span class="orderStatus">
                                    待付款
                                </span>
                            </span></span></p>
                        </div>
                        <a href="/m/orderStatus?orderId=2018121110052550823">
                            
                            <div class="olaList-center" data-skuid="10006684706262" data-num="1">
                                <div class="olaListcenter-left fl">
                                    <img src="http://img.66fenqi.cn/prodMainPic/20181128/kGMlFmXxGX8KbXs.jpg">
                                </div>
                                <div class="olaListcenter-right">
                                    <p class="orderTitile">
                                        海苔苏打饼干1800g
                                    </p>s
                                    <p class="orderPro">
                                        5斤
                                    </p>
                                    <p class="orderPriceNum">
                                        <span class="orderPrice">￥
                                            <label>0.01</label>
                                        </span>
                                        <span class="orderNum fr">X 1</span>
                                    </p>
                                </div>
                            </div>
                            
                        </a>
                        <div>
                            <p class="orderCount">共1件商品合计￥0.01(含运费￥0.0)</p>
                        </div>
                        <div class="olaList-footer">
                            
                            <a class="cancelOrder" data-value="2018121110052550823">
                                取消订单
                            </a>
                            <a class="maketrue" href="/m/orderPay?orderId=2018121110052550823&amp;orderTotalprice=0.01">
                                立即付款
                            </a>
                            
                        </div>
                    </div>
                    <div class="olaList" data-orderid="2018121110052550823">
                        <div class="olaList-head">
                            <p>
                                <span class="line"></span>
                                <span style="margin-left: 0.4rem">订单号：<span>
                                <span>
                                    2018121110052550823
                                </span>
                                <span class="orderStatus">
                                    待付款
                                </span>
                            </span></span></p>
                        </div>
                        <a href="/m/orderStatus?orderId=2018121110052550823">
                            
                            <div class="olaList-center" data-skuid="10006684706262" data-num="1">
                                <div class="olaListcenter-left fl">
                                    <img src="http://img.66fenqi.cn/prodMainPic/20181128/kGMlFmXxGX8KbXs.jpg">
                                </div>
                                <div class="olaListcenter-right">
                                    <p class="orderTitile">
                                        海苔苏打饼干1800g
                                    </p>s
                                    <p class="orderPro">
                                        5斤
                                    </p>
                                    <p class="orderPriceNum">
                                        <span class="orderPrice">￥
                                            <label>0.01</label>
                                        </span>
                                        <span class="orderNum fr">X 1</span>
                                    </p>
                                </div>
                            </div>
                            
                        </a>
                        <div>
                            <p class="orderCount">共1件商品合计￥0.01(含运费￥0.0)</p>
                        </div>
                        <div class="olaList-footer">
                            
                            <a class="cancelOrder" data-value="2018121110052550823">
                                取消订单
                            </a>
                            <a class="maketrue" href="/m/orderPay?orderId=2018121110052550823&amp;orderTotalprice=0.01">
                                立即付款
                            </a>
                            
                        </div>
                    </div>
                    <div class="olaList" data-orderid="2018121110052550823">
                        <div class="olaList-head">
                            <p>
                                <span class="line"></span>
                                <span style="margin-left: 0.4rem">订单号：<span>
                                <span>
                                    2018121110052550823
                                </span>
                                <span class="orderStatus">
                                    待付款
                                </span>
                            </span></span></p>
                        </div>
                        <a href="/m/orderStatus?orderId=2018121110052550823">
                            
                            <div class="olaList-center" data-skuid="10006684706262" data-num="1">
                                <div class="olaListcenter-left fl">
                                    <img src="http://img.66fenqi.cn/prodMainPic/20181128/kGMlFmXxGX8KbXs.jpg">
                                </div>
                                <div class="olaListcenter-right">
                                    <p class="orderTitile">
                                        海苔苏打饼干1800g
                                    </p>s
                                    <p class="orderPro">
                                        5斤
                                    </p>
                                    <p class="orderPriceNum">
                                        <span class="orderPrice">￥
                                            <label>0.01</label>
                                        </span>
                                        <span class="orderNum fr">X 1</span>
                                    </p>
                                </div>
                            </div>
                            
                        </a>
                        <div>
                            <p class="orderCount">共1件商品合计￥0.01(含运费￥0.0)</p>
                        </div>
                        <div class="olaList-footer">
                            
                            <a class="cancelOrder" data-value="2018121110052550823">
                                取消订单
                            </a>
                            <a class="maketrue" href="/m/orderPay?orderId=2018121110052550823&amp;orderTotalprice=0.01">
                                立即付款
                            </a>
                            
                        </div>
                    </div>

                    <div class="olaList" data-orderid="2018121110052550823">
                        <div class="olaList-head">
                            <p>
                                <span class="line"></span>
                                <span style="margin-left: 0.4rem">订单号：<span>
                                <span>
                                    2018121110052550823
                                </span>
                                <span class="orderStatus">
                                    待付款
                                </span>
                            </span></span></p>
                        </div>
                        <a href="/m/orderStatus?orderId=2018121110052550823">
                            
                            <div class="olaList-center" data-skuid="10006684706262" data-num="1">
                                <div class="olaListcenter-left fl">
                                    <img src="http://img.66fenqi.cn/prodMainPic/20181128/kGMlFmXxGX8KbXs.jpg">
                                </div>
                                <div class="olaListcenter-right">
                                    <p class="orderTitile">
                                        海苔苏打饼干1800g
                                    </p>s
                                    <p class="orderPro">
                                        5斤
                                    </p>
                                    <p class="orderPriceNum">
                                        <span class="orderPrice">￥
                                            <label>0.01</label>
                                        </span>
                                        <span class="orderNum fr">X 1</span>
                                    </p>
                                </div>
                            </div>
                            
                        </a>
                        <div>
                            <p class="orderCount">共1件商品合计￥0.01(含运费￥0.0)</p>
                        </div>
                        <div class="olaList-footer">
                            
                            <a class="cancelOrder" data-value="2018121110052550823">
                                取消订单
                            </a>
                            <a class="maketrue" href="/m/orderPay?orderId=2018121110052550823&amp;orderTotalprice=0.01">
                                立即付款
                            </a>
                            
                        </div>
                    </div>
                    <div class="olaList" data-orderid="2018121110052550823">
                        <div class="olaList-head">
                            <p>
                                <span class="line"></span>
                                <span style="margin-left: 0.4rem">订单号：<span>
                                <span>
                                    2018121110052550823
                                </span>
                                <span class="orderStatus">
                                    待付款
                                </span>
                            </span></span></p>
                        </div>
                        <a href="/m/orderStatus?orderId=2018121110052550823">
                            
                            <div class="olaList-center" data-skuid="10006684706262" data-num="1">
                                <div class="olaListcenter-left fl">
                                    <img src="http://img.66fenqi.cn/prodMainPic/20181128/kGMlFmXxGX8KbXs.jpg">
                                </div>
                                <div class="olaListcenter-right">
                                    <p class="orderTitile">
                                        海苔苏打饼干1800g
                                    </p>s
                                    <p class="orderPro">
                                        5斤
                                    </p>
                                    <p class="orderPriceNum">
                                        <span class="orderPrice">￥
                                            <label>0.01</label>
                                        </span>
                                        <span class="orderNum fr">X 1</span>
                                    </p>
                                </div>
                            </div>
                            
                        </a>
                        <div>
                            <p class="orderCount">共1件商品合计￥0.01(含运费￥0.0)</p>
                        </div>
                        <div class="olaList-footer">
                            
                            <a class="cancelOrder" data-value="2018121110052550823">
                                取消订单
                            </a>
                            <a class="maketrue" href="/m/orderPay?orderId=2018121110052550823&amp;orderTotalprice=0.01">
                                立即付款
                            </a>
                            
                        </div>
                    </div>
                    
                </div>
            </div>
		</div>
    </div>
</template>
<script>
import TopTitle from  "@/components/web/public/TopTitle"
export default {
    name:"orderList",
    data(){
        return{
            title:"我的订单"
        }
    },
    components:{
        topTitle:TopTitle
    }
}
</script>
<style>
.orderMenu {
    position: fixed;
    display: table;
    width: 100%;
    z-index: 9;
    top: 0.85rem;
}
.orderMenu li {
    width: 20%;
    float: left;
    font-size: 0.3rem;
    text-align: center;
    background: #fff;
    height: 1.0rem;
    line-height: 1.0rem;
}
.orderMenu li a {
    height: 1.0rem;
    display: inline-block;
    color: #424242;
}
.orderMenu li a.active {
    color: #CB2F42;
    border-bottom: 2px solid #CB2F42;
}

/* 这里订单列表的样式 */
.orderList div.active {
    display: block;
    margin-top: 1.88rem;
}
.olaList {
    background: #fff;
    margin-top: 0.16rem;
}
.olaList-head {
    height: 0.64rem;
    line-height: 0.64rem;
    color: #424242;
    font-size: 0.3rem;
    border: 1px solid #F3F3F3;
}
.line {
    width: 4px;
    background: #CB2F42;
    height: 0.4rem;
    display: inline-block;
    margin-top: 0.1rem;
    margin-left: 2.1%;
    position: absolute;
}
.orderStatus {
    float: right;
    color: #CB2F42;
    margin-right: 4.3%;
}
.olaList-center {
    margin-top: 0.22rem;
    background: #fff;
    display: table;
    width: 100%;
}
.fl {
    float: left;
}

.olaListcenter-left img {
    width: 1.8rem;
    height: 1.8rem;
    margin-right: 0.32rem;
    margin-left: 0.32rem;
}
.orderTitile {
    font-size: 0.3rem;
    color: #041A27;
}
.orderPro {
    color: #666666;
    font-size: 0.26rem;
    margin-top: 0.10rem;
}
.orderPriceNum {
    margin-top: 0.13rem;
}
.orderPrice {
    font-size: 0.2rem;
    color: #FF4F00;
    font-weight: bold;
}
.orderPrice label {
    font-size: 0.34rem;
}
.orderNum {
    color: #666666;
    font-size: 0.3rem;
    margin-right: 4.3%;
}
.orderCount {
    width: 100%;
    margin-top: 5%;
    color: #666666;
    font-size: 0.26rem;
    padding-right: 0.32rem;
    text-align: right;
    border-bottom: 1px solid #f3f3f3;
    padding-bottom: 0.22rem;
    line-height: 0.5rem;
}
.olaList-footer {
    margin-right: 0.32rem;
    text-align: right;
}
.olaList-footer a {
    width: 1.68rem;
    height: 0.64rem;
    display: inline-block;
    border: 1px solid #9C9C9C;
    border-radius: 0.32rem;
    text-align: center;
    line-height: 0.64rem;
    margin-top: 3%;
    margin-left: 2.1%;
    margin-bottom: 2.1%;
    font-size: .26rem;
}
.olaList-footer a.maketrue {
    color: #FFAB00;
    border: 1px solid #FFAB00;
}
</style>
